<template>
    <div>
        <div class="container">
            <div class="demo">
                <wxc-minibar title="我的主页"
                             background-color="#009ff0"
                             text-color="#FFFFFF"
                             leftButton=""
                             @wxcMinibarLeftButtonClicked="minibarLeftButtonClick"
                             @wxcMinibarRightButtonClicked="minibarRightButtonClick"></wxc-minibar>
            </div>
        </div>
        <div class="header">
            <div class="img">
                <image style="width:300px;height:300px;border-radius:150px;border-width: 2px;border-color:black;margin-left: 40px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3113153671,3782273400&fm=27&gp=0.jpg"></image>
            </div>
            <div class="img_text">
                <text class="img_text_t"> 昵称：熊大爱吃肉</text>
                <text class="img_text_t">  ID：1213211</text>
                <text class="img_text_t" >巴币：5000</text>
                <text class="img_text_t" style="border-bottom-width:0px;">可提现：1000</text>
            </div>
        </div>
        <div class="button" @click="jump(event)"><text style="margin-left: 30px;">红包记录</text></div>
        <div class="button" @click="chongzhi(event)"><text style="margin-left: 30px" >充值</text></div>
        <div class="button" @click="duihuan(event)"><text style="margin-left: 30px">兑换</text></div>
    </div>


</template>

<script>
    import { WxcMinibar } from 'weex-ui';
    const modal = weex.requireModule('modal');
    var navigator = weex.requireModule('navigator');
    export default {
        components: { WxcMinibar },
        methods: {
            minibarLeftButtonClick () {
            },
            minibarRightButtonClick () {
                modal.toast({ 'message': 'click rightButton!', 'duration': 1 });
            },
            // jilu(event){
            //     navigator.push({
            //         url: 'http://192.168.3.134:8081/dist/hbTab.js',
            //         animated: "true"
            //     }, event => {
            //         modal.toast({ message: 'callback: ' + event })
            //     })
            // }
            qqq(){
                var bundleUrl = this.$getConfig().bundleUrl;
                bundleUrl = new String(bundleUrl);
                var nativeBase;
                var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

                var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
                if (isAndroidAssets) {
                    nativeBase = 'file://assets/dist/';
                }
                else if (isiOSAssets) {
                    nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
                }
                else {
                    var host = 'localhost:8081';
                    var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
                    if (matches && matches.length >= 2) {
                        host = matches[1];
                    }
                    nativeBase = 'http://' + host + '/dist/';
                }
                this.baseURL = nativeBase;
            },
            /*处理登录*/
            jump (event) {
                this.qqq()
                navigator.push({
                    url: this.baseURL+'hbTab.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            chongzhi(event) {
                this.qqq()
                navigator.push({
                    url: this.baseURL+'radio.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            duihuan(event) {
                this.qqq()
                navigator.push({
                    url: this.baseURL+'duihuan.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
        }
    };
</script>
<style>
    .header{
        width: 750px;
        height:400px;
        background-color:#ffffff;
    }
    .img{
        width: 375px;
        height:375px;
        border-width: 1px;
        border-color:green;
        line-height: 375px;
        justify-content: center;
    }
    .img_text{
        width: 375px;
        height:375px;
        border-width: 1px;
        border-color:green;
        justify-content: center;
        align-items:center;
        margin-top: -375px;
        margin-left: 375px;
    }
    .img_text_t{
        height: 70px;
        border-bottom-width: 1px;
        border-color:green;
        line-height: 70px;
        display: flex;
        justify-content:center;
        margin-top: 10px;
        text-align: center;
    }
    .button{
        width: 700px;
        height: 100px;
        margin-top: 30px;
        line-height: 100px;
        text-align:center;
        margin-left: 25px;
        border-radius: 10px;
        display: flex;
        justify-content:center;
        background-color: #74ccba;
    }
    .input-wrapper{
        width: 550px;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 30px;
    }
    .input-login{
        height: 80px;
        width: 550px;
        background-color: #48c9bf;
        border-radius: 10px;
        margin-top: 40px;
    }
    .input-login-text{
        height: 80px;
        width: 550px;
        text-align: center;
        line-height: 80px;
        color: white;
        font-size: 35px;
    }
</style>